<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑伞青的个人博客</title>   
    <link rel="stylesheet" href="css/all.css"> <!-- 正确路径 -->
    <script src="js/all.js"></script> <!-- 正确路径 -->
    <link rel="stylesheet" href="css/blog.css"> <!-- 正确路径 -->
    <script src="js/blog.js"></script> <!-- 正确路径 -->
</head>
<body>

    <header class="main-header">
        <nav>
            <ul class="nav-list">
                <li><a href="index.html" class="active">首页</a></li>
                <li><a href="about.html">关于我</a></li>
                <li><a href="blog.html">技术博客</a></li>
                <li><a href="contact.html">联系</a></li>
            </ul>
        </nav>
        <!-- 导航栏与首页保持一致 -->
    </header>


     <!-- 技能树模块 -->
     <section class="skills-section">
        <h2>技术技能树</h2>
        <div class="skills-grid">
            <div class="skill-item">
                <h3>HTML5</h3>
                <div class="skill-bar">
                    <div class="skill-progress" style="width: 50%"></div>
                </div>
            </div>
            <div class="skill-item">
                <h3>CSS3</h3>
                <div class="skill-bar">
                    <div class="skill-progress" style="width: 50%"></div>
                </div>
            </div>
            <div class="skill-item">
                <h3>Javascript</h3>
                <div class="skill-bar">
                    <div class="skill-progress" style="width: 10%"></div>
                </div>
            </div>
            <div class="skill-item">
                <h3>C</h3>
                <div class="skill-bar">
                    <div class="skill-progress" style="width: 60%"></div>
                </div>
            </div>
            <div class="skill-item">
                <h3>C++</h3>
                <div class="skill-bar">
                    <div class="skill-progress" style="width: 10%"></div>
                </div>
            </div>
            <div class="skill-item">
                <h3>Python</h3>
                <div class="skill-bar">
                    <div class="skill-progress" style="width: 12%"></div>
                </div>
            </div>
            <div class="skill-item">
                <h3>Java</h3>
                <div class="skill-bar">
                    <div class="skill-progress" style="width: 15%"></div>
                </div>
            </div>
            <div class="skill-item">
                <h3>Git</h3>
                <div class="skill-bar">
                    <div class="skill-progress" style="width: 30%"></div>
                </div>
            </div>
            <!-- 添加更多技能项 -->
        </div>
    </section>

    <!-- 学习时间线 -->
    <section class="timeline-section">
        <h2>学习历程</h2>
        <div class="timeline">
            <div class="timeline-item">
                <div class="timeline-date">2024.09</div>
                <div class="timeline-content">
                    <h3>进入大学，开始学程序设计基础</h3>
                    <p>学业要求：系统学习计算机基础知识和C语言编程</p>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-date">2024.10</div>
                <div class="timeline-content">
                    <h3>自学阶段一</h3>
                    <p>在菜鸟驿站结合B站视频和学校图书馆书籍学习HTML5，CSS3</p>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-date">2024.11</div>
                <div class="timeline-content">
                    <h3>乱学阶段</h3>
                    <p>C++和Python都沾了一点，主要是看视频和网站</p>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-date">2025.2</div>
                <div class="timeline-content">
                    <h3>二入大学</h3>
                    <p>要学Java了</p>
                </div>
            </div>
            <!-- 添加更多时间线项 -->
        </div>
    </section>

    <section class="project-article-list">
        <h2>我的项目</h2>
        <article id="c-project001" class="project-article">  <!-- 新增id属性 -->
            <h3>我的第一个C项目实践</h3>
            <p>公交车信息查询系统，主要依赖：clion，ai，ege图形库，dfs算法</p>
            
            <p>这个项目是我在大学学习C语言编程的第一个完整项目，通过这个项目，我学习了C语言的基本语法、数据结构和算法，以及如何使用图形库来实现用户界面。</p>
            
            <p>项目的主要功能包括：</p>
            <ul>
                <li>查询公交车站点信息</li>
                <li>查询公交车路线信息</li>
                <li>查询公交车站点之间的最短路径</li>
                <li>登录注册</li>
                <li>车次信息和站点信息的增删改</li>
            </ul>
            
            <p>项目的实现过程中，我使用了C语言的基本语法、数据结构和算法，以及图形库来实现用户界面。在查询公交车站点之间的最短路径时，我使用了深度优先搜索算法。</p>
            
            <!-- ... 文章内容 ... -->
        </article>
        
        
    </section>


</body>
</html>